<template>
	<list class="y-flex y-flex-1">
		<header>
			<form-header text="导航列表"></form-header>
		</header>
		<cell>
			<view class="y-flex y-row y-align-center border-bottom-1" :style="{'border-bottom-color': skinColor.color_gap_1}">
				<view class="y-flex y-flex-1 pt-20 pb-10 position-relative"
				:class="{'border-right-1': index < list.length-1}"
				:style="{'border-right-color': skinColor.color_gap_1}" v-for="(item, index) in list" :key="index" @tap="tabbarClick(index)">
					<view class="y-flex y-align-center">
						<com-logo
						v-if="item.icon"
						:src="listIndex == index ? item.selectedIcon : item.icon" size="50"
						:color="listIndex == index ? skinColor.color_1 : skinColor.color_3"></com-logo>
					</view>
					<text class="fs-24 mt-15 text-align-center lines-1" :style="{color: listIndex == index ? skinColor.color_1 : skinColor.color_3}">{{item.text}}</text>
					<view class="y-flex y-row y-align-center y-justify-center mt-20">
						<text class="fs-24 fr-primary" @tap="handleEditRoot($event, index)">编辑</text>
					</view>
					<com-icon :disabled="disabled"
					class="position-absolute top-10 right-10"
					name="close" size="28"
					:color="skinColor.color_3"
					@click="handleCloseRoot($event, index)"></com-icon>
				</view>
			</view>
			<template v-if="listIndex > -1">
				<com-icon :style="{'transform': 'translateX(' + translate + 'px)'}" name="fold" size="50" :color="skinColor.color_gap_1"></com-icon>
				<view class="y-flex y-row border-1 border-radius-15 page-margin-gap" :style="{'border-color': skinColor.color_gap_1, 'margin-top': '-20rpx'}">
					<scroll-view class="y-flex y-row y-flex-1" scroll-x >
						<view class="y-flex pt-20 pb-10 position-relative border-right-1"
						:style="{'border-right-color': skinColor.color_gap_1, 'width': '200rpx'}" v-for="(item, index) in children" :key="index">
							<view class="y-flex y-align-center">
								<com-logo v-if="item.icon" :src="item.icon" size="50" :color="skinColor.color_3"></com-logo>
							</view>
							<text class="fs-24 mt-15 text-align-center lines-1" :style="{color: skinColor.color_3}">{{item.text}}</text>
							<view class="y-flex y-row y-align-center y-justify-center mt-20">
								<text class="fs-24 fr-primary" @tap="handleEditChild(index)">编辑</text>
							</view>
							<com-icon :disabled="disabled"
							class="position-absolute top-10 right-10"
							name="close" size="28"
							:color="skinColor.color_3" @click="handleCloseChild(index)"></com-icon>
						</view>
						<view class="y-flex y-align-center y-justify-center pr-30 pl-30 border-right-1"
						:style="{'border-right-color': skinColor.color_gap_1, 'min-height': '120rpx'}" :key="i" @tap="handleAddChild">
							<com-icon :disabled="disabled" name="add" size="40" :color="skinColor.color_3"></com-icon>
							<text class="fs-24 mt-15" :style="{color: skinColor.color_3}">添加子导航</text>
						</view>
					</scroll-view>
				</view>
			</template>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleAddRoot">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加导航</text>
			</view>
		</cell>
		<header>
			<form-header text="亮色模式样式表"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(lightForm)">
			<form-item v-model="lightForm[key]" :type="tabbarStyle[key].type" :label="tabbarStyle[key].label" :disabled="disabled" closeable @close="handleClose('lightForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('lightForm')">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加亮色样式</text>
			</view>
		</cell>
		<header>
			<form-header text="暗黑模式样式表"></form-header>
		</header>
		<cell v-for="(key, i) in Object.keys(darkForm)">
			<form-item v-model="darkForm[key]" :type="tabbarStyle[key].type" :label="tabbarStyle[key].label" :disabled="disabled" closeable @close="handleClose('darkForm', key)"></form-item>
		</cell>
		<cell>
			<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('darkForm')">
				<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
				<text class="fs-30" :style="{color: skinColor.color_1}">添加暗黑样式</text>
			</view>
		</cell>
		<options-select ref="optionsSelect"></options-select>
	</list>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import { Tabbar } from '@/assets/js/interface.js'
	import OptionsSelect from '../components/options.vue'
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	export default {
		mixins: [appMixin],
		components: {OptionsSelect, FormItem, FormHeader},
		props: {
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			tabbarStyle () {
				return Tabbar.style
			},
			translate () {
				const length = this.list.length
				const cellWidth = length ? this.windowWidth / length : 1
				return (cellWidth * this.listIndex) + (cellWidth / 2) - uni.upx2px(25)
			}
		},
		data () {
			return {
				lightForm: {},//亮色样式表单
				darkForm: {},//暗黑样式表单
				list: [],//导航列表
				listIndex: -1,
				children: []//子导航列表
			}
		},
		beforeDestroy () {
			uni.$off('tabbarItemSelect')
		},
		methods: {
			onShow () {
				uni.$off('tabbarItemSelect')
			},
			onBackPress () {
				if ( this.$refs.optionsSelect.visible ) {
					this.$refs.optionsSelect.hide()
					return true
				}
				return false
			},
			setData (jsonData) {
				const tabbar = jsonData.tabbar
				if ( tabbar ) {
					const style = tabbar.style || {}
					const darkStyle = tabbar.darkStyle || style.darkStyle || {}
					this.list = tabbar.list || []
					Object.keys(style).forEach(key => {
						if ( key != 'darkStyle' ) this.$set(this.lightForm, key, style[key])
					})
					Object.keys(darkStyle).forEach(key => {
						this.$set(this.darkForm, key, darkStyle[key])
					})
				}
			},
			handleStyleSelect (formName) {
				if ( this.disabled ) return
				this.$refs.optionsSelect.select({
					title: '选择添加的样式',
					actions: Object.keys(this.tabbarStyle).filter(key => Object.keys(this[formName]).indexOf(key) == -1).map(key => this.tabbarStyle[key].label),
					success: res => {
						const keys = Object.keys(this.tabbarStyle)
						const index = keys.findIndex(key => this.tabbarStyle[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this[formName], key, this.tabbarStyle[key].value)
					}
				})
			},
			handleClose (formName, k) {
				this[formName] = this.$utils.deleteProperty(this[formName], k)
			},
			handleAddRoot () {
				if ( this.disabled ) return
				uni.$once('tabbarItemSelect', data => {
					this.list.push(data)
				})
				this.$Router.push({ path: '/pages/program/form/tabbar/form' })
			},
			handleAddChild () {
				if ( this.disabled ) return
				uni.$once('tabbarItemSelect', data => {
					if ( this.list[this.listIndex].children ) this.list[this.listIndex].children.push(data)
					else this.list[this.listIndex].children = [data]
					this.children.push(data)
				})
				this.$Router.push({ path: '/pages/program/form/tabbar/form', query: { type: 'child' } })
			},
			handleEditRoot (e, index) {
				e.stopPropagation && e.stopPropagation()
				if ( this.disabled ) return
				uni.$once('tabbarItemSelect', data => {
					this.$set(this.list, index, data)
				})
				this.$Router.push({ path: '/pages/program/form/tabbar/form', query: {form: this.list[index], disabled: this.disabled} })
			},
			handleEditChild (index) {
				if ( this.disabled ) return
				uni.$once('tabbarItemSelect', data => {
					this.$set(this.list[this.listIndex].children, index, data)
				})
				this.$Router.push({ path: '/pages/program/form/tabbar/form', query: {form: this.list[this.listIndex].children[index], type: 'child', disabled: this.disabled} })
			},
			handleCloseRoot (e, index) {
				e.stopPropagation && e.stopPropagation()
				if ( this.disabled ) return
				this.list.splice(index, 1)
				if ( this.listIndex == index ) this.listIndex = -1
			},
			handleCloseChild (index) {
				if ( this.disabled ) return
				let child = this.list[this.listIndex].children || []
				child.splice(index, 1)
				this.$set(this.list[this.listIndex], 'children', child)
				this.children = child
			},
			tabbarClick (index) {
				this.listIndex = this.listIndex == index ? -1 : index
				if ( this.listIndex > -1 ) this.children = this.$utils.deepClone(this.list[index].children || [])
				else this.children = []
			}
		}
	}
</script>

<style>
</style>